﻿using SharpKit.JavaScript;
using SharpKit.Html4;
using SharpKit.jQuery;
using WebDesigner.Templates;
using SharpKit.jQuery.UI;
namespace WebDesigner
{

    [JsType(JsMode.Global, Filename = "res/Default.js")]
    public class DefaultClient : jQueryContext
    {
        static void DefaultClient_Load()
        {
            //J(".StyleEditorPanel").dialog();
            ColorPickerClient.ColorPickerValueChanged = () =>
                {
                    var item = PropertyGrid.GetItem(PropertyGrid.CurrentRow);
                    if (item != null)
                    {
                        item.Value = ColorPickerClient.GetColorPickerValue();
                        style.setProperty(item.Name, item.Value);
                        PropertyGrid.SetItem(PropertyGrid.CurrentRow, item);
                    }
                };

            PropertyGrid = new PropertyGrid(".PropertyGrid");
            PropertyGrid.FinishEdit = t => style.setProperty(t.Name, t.Value);
            PropertyGrid.BeginEdit = t =>
                {
                    if (t.Name.indexOf("color") >= 0)
                    {
                        ColorPickerClient.SetColorPickerValue(t.Value);
                    }
                };

        }
        static JsString IFrameId { get; set; }
        static HtmlWindow GetWindow()
        {
            if (IFrameId != null)
                return J("#" + IFrameId).get(0).As<HtmlIFrame>().contentWindow;
            return window.parent;
        }
        static PropertyGrid PropertyGrid;
        static HtmlStyleElement StyleSheet;
        //static HtmlCssRule rule;
        static JsNumber RuleIndex = -1;
        static CSSStyleDeclaration style;
        static void btnTest_click(HtmlDomEventArgs e)
        {
            PropertyGrid.DeleteRows();
            var styleSheets = GetWindow().document.styleSheets;
            ShowStylesheets(styleSheets);
        }

        private static void ShowStylesheets(HtmlNodeCollection<HtmlStyleElement> list)
        {
            var div = J("#divList");
            div.html("");
            for (var i = 0; i < list.length; i++)
            {
                var lnk = document.createElement<HtmlAnchor>();
                J(lnk).text(list[i].href);
                //lnk.href = "javascript:void()";
                J(lnk).click(e => ShowStylesheet(J(@this).text()));
                div.append(lnk);
            }
        }

        private static void ShowStylesheet(JsString href)
        {
            var list = GetWindow().document.styleSheets;
            for (var i = 0; i < list.length; i++)
            {
                if (list[i].href == href)
                {
                    StyleSheet = list[i];
                    ShowRules();
                    break;
                }
            }
        }

        private static void ShowList<T>(JsArray<JsString> list, JsFunc<T, JsString> getter, JsAction<JsString> clickHandler)
        {
            var div = J("#divList");
            div.html("");
            for (var i = 0; i < list.length; i++)
            {
                var rule = list[i].As<T>();
                var lnk = document.createElement<HtmlAnchor>();
                J(lnk).text(getter(rule));
                lnk.href = "javascript:void(0)";
                J(lnk).click(e => clickHandler(J(@this).text()));
                div.append(lnk);
                div.append("<br/>");
            }
        }

        private static void ShowRules()
        {
            var div = J("#divList");
            div.html("");
            if (StyleSheet == null)
                return;
            var list = StyleSheet.rules;
            //TODO: ShowList(
            for (var i = 0; i < list.length; i++)
            {
                var rule = list[i];
                var lnk = document.createElement<HtmlAnchor>();
                J(lnk).text(rule.selectorText);
                lnk.href = "javascript:void()";
                J(lnk).click(e => ShowRule(J(@this).text()));
                div.append(lnk);
            }
        }

        private static void ShowRule(JsString selectorText)
        {
            var list = StyleSheet.rules;
            for (var i = 0; i < list.length; i++)
            {
                var rule = list[i];
                if (rule.selectorText == selectorText)
                {
                    RuleIndex = i;
                    LoadRule(StyleSheet.rules[RuleIndex]);
                    break;
                }
            }
        }
        static void btnNextRule_click(HtmlDomEventArgs e)
        {
            RuleIndex++;
            LoadRule(StyleSheet.rules[RuleIndex]);
        }
        static void btnPrevRule_click(HtmlDomEventArgs e)
        {
            RuleIndex--;
            if (RuleIndex < 0)
                RuleIndex = 0;
            LoadRule(StyleSheet.rules[RuleIndex]);
        }

        private static void LoadRule(HtmlCssRule rule)
        {
            PropertyGrid.DeleteRows();
            style = rule.style.As<CSSStyleDeclaration>();
            //J(".styleSheet").text(styleSheet..selectorText);
            J(".Rule").text(rule.selectorText);
            var x = style;
            for (var i = 0; i < x.length; i++)
            {
                var pe = x[i];
                var value = x.getPropertyValue(pe);
                PropertyGrid.AddRow(new PropertyGridItem { Name = pe, Value = value });
            }
        }

        static void btnAdd_click(HtmlDomEventArgs e)
        {
            PropertyGrid.AddRow(new PropertyGridItem { Name = "border", Value = "solid 1px black" });
        }

        private static void WriteLine(object p)
        {
            J(document.body).append(p.As<JsString>());
            J(document.body).append("<br/>");
        }
    }


    [JsType(JsMode.Prototype)]
    class CSSStyleDeclaration
    {
        [JsProperty(NativeIndexer = true)]
        public JsString this[JsNumber index] { get { return null; } }
        public JsNumber length { get; set; }
        public JsString getPropertyValue(JsString name) { return null; }
        public JsString setProperty(JsString name, JsString value) { return null; }
    }
}